import React, { useEffect, useState } from 'react';
import { Button, Space, Table, Tree, Drawer, Form, Input, Select, message } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import * as user from '../../../api/user';
import type { DataNode } from 'antd/es/tree';

function User(props: any) {
    interface DataType {
        key: string;
        name: string
        department: string;
        adminname: string;
        post: string;
        iphone: string;
        email: string;
        role: string;
        state: string;
        id: string;

    }

    // 创建列表渲染数据
    const [tableData, setTableData] = useState<DataType[]>([])

    // 表格列表
    const columns: ColumnsType<DataType> = [
        {
            title: '序号',
            key: 'num',
            render: (_, record) => <span>{tableData.indexOf(record) + 1}</span>
        },
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
            render: (text) => <span>{text}</span>,
        },
        {
            title: '账号',
            dataIndex: 'adminname',
            key: 'adminname',
            render: (text) => <span>{text}</span>,
        },
        {
            title: '部门',
            dataIndex: 'department',
            key: 'department',
            render: (text) => <span>{text}</span>,
        },
        {
            title: '岗位',
            dataIndex: 'post',
            key: 'post',
            render: (text) => <span>{text}</span>,
        },
        {
            title: '手机号',
            dataIndex: 'iphone',
            key: 'iphone',
            render: (text) => <span>{text}</span>,
        },
        {
            title: '邮件',
            dataIndex: 'email',
            key: 'email',
            render: (text) => <span>{text}</span>,
        },
        {
            title: '角色',
            dataIndex: 'role',
            key: 'role',
            render: (text) => <span>{text}</span>,
        },
        {
            title: '状态',
            dataIndex: 'states',
            key: 'states',
            render: (text) => <span>{text}</span>,
        },
        {
            title: '操作',
            key: 'id',
            render: (_, record: any) => (
                <Space size="middle" >
                    <Button onClick={() => { onEdit(record) }}>编辑</Button>
                    <Button danger onClick={() => { onDelete(record) }}>删除</Button>
                </Space>
            ),
        },
    ]

    // 用户列表
    let userlist = async () => {
        var res = await user.system_list()
        console.log(res)
        setTableData(res.data.data)
    }
    useEffect(() => {
        userlist();
    }, [])

    // 设置抽屉开关
    const [open, setOpen] = useState(false);
    // 设置添加编辑开关
    const [flag, setFlag] = useState(true)
    // 开启抽屉
    let onOpen = () => {
        console.log(flag);
        setOpen(true)
    }
    // 关闭抽屉
    let onClose = () => {
        form.setFieldsValue({ name: '', adminname: '', department: '', post: '', iphone: '', email: '', role: '', states: '', checkedKeys: '' })
        setOpen(false)
        setFlag(true)
        // setValues(undefined)
    }
    // 表单验证成功
    let onFinish = async (values: any) => {
        if (flag) {
            console.log(flag);
            console.log(values);
            var res = await user.system_add({ ...values, "number": "GH2000011220", "idcard": "352125435841", "payable": "1500.00", "actual": "1000.00" })
            userlist()
            message.success('新增成功', 2, onClose)
        } else {
            console.log(flag)
            let newobj = { id, ...values }
            var res = await user.system_edit({ id, ...values, "number": "GH2000011220", "idcard": "352125435841", "payable": "1500.00", "actual": "1000.00" })
            userlist()
            message.success('修改成功', 2, onClose)


        }
    }
    // 表单验证失败
    let onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo)
        message.error('新增失败', 2, onClose)
    }
    // 删除用户
    let onDelete = async (id: any) => {
        var res = await user.system_delete(id)
        console.log(res)
        userlist()
        message.success('删除成功', 2)
    }
    // 编辑用户
    var [form] = Form.useForm()
    // 保存id
    const [id, setId] = useState()
    let onEdit = (item: any) => {
        console.log(item)
        setOpen(true)
        setFlag(false)

        setId(item.id)
        form.setFieldsValue(item)
        userlist()
    }
    // const [values, setValues] = useState<string[] | undefined>([])
    // // 权限复选框改变时数据
    // var onCheck = (checkedKeys: any) => {
    //     form.setFieldValue('checkedKeys', checkedKeys);
    //     setValues(checkedKeys)
    // }
    // // 定义权限
    // const treeData: DataNode[] = [
    //     {
    //         title: '首页',
    //         key: '0-0',
    //     },
    //     {
    //         title: '组织机构',
    //         key: '0-0-0',
    //         children: [
    //             {
    //                 title: '组织管理',
    //                 key: '0-0-1',
    //             },
    //             {
    //                 title: '岗位管理',
    //                 key: '0-0-2',
    //             },
    //             {
    //                 title: '职务管理',
    //                 key: '0-0-3',
    //             },
    //         ],
    //     },
    //     {
    //         title: '人事管理',
    //         key: '0-1-0',
    //         children: [
    //             {
    //                 title: '人员管理',
    //                 key: '0-1-1',

    //             },
    //             {
    //                 title: '转正管理',
    //                 key: '0-1-2',

    //             },
    //             {
    //                 title: '离职管理',
    //                 key: '0-1-3',

    //             }
    //         ],
    //     },
    //     {
    //         title: '社保公积金',
    //         key: '0-2-0',
    //         children: [
    //             {
    //                 title: '社保方案',
    //                 key: '0-2-1',
    //             },
    //             {
    //                 title: '公积金方案',
    //                 key: '0-2-2',
    //             },
    //             {
    //                 title: '参保档案',
    //                 key: '0-2-3',
    //             },
    //         ],
    //     },
    //     {
    //         title: '员工薪资',
    //         key: '0-3-0',
    //         children: [
    //             {
    //                 title: '薪资档案',
    //                 key: '0-3-1',

    //             },
    //             {
    //                 title: '薪资调整',
    //                 key: '0-3-2',

    //             },
    //             {
    //                 title: '定薪模板',
    //                 key: '0-3-3',

    //             },
    //         ],
    //     },
    //     {
    //         title: '薪资核算',
    //         key: '0-4-0',
    //         children: [
    //             {
    //                 title: '薪资项目',
    //                 key: '0-4-1',

    //             },
    //             {
    //                 title: '薪资方案',
    //                 key: '0-4-2',

    //             },
    //             {
    //                 title: '薪资台账',
    //                 key: '0-4-3',

    //             },
    //         ],
    //     },
    //     {
    //         title: '个税数据',
    //         key: '0-5-0',
    //         children: [
    //             {
    //                 title: '专项附加扣除',
    //                 key: '0-5-1',

    //             },
    //             {
    //                 title: '累计应纳税所得额',
    //                 key: '0-5-2',

    //             },
    //             {
    //                 title: '计税规则',
    //                 key: '0-5-3',

    //             },
    //         ],
    //     },
    //     {
    //         title: '考勤数据',
    //         key: '0-6-0',
    //         children: [
    //             {
    //                 title: '考勤报表',
    //                 key: '0-6-1',

    //             },
    //         ],
    //     },
    //     {
    //         title: '工资单管理',
    //         key: '0-7-0',
    //         children: [
    //             {
    //                 title: '工资单设置',
    //                 key: '0-7-1',
    //             },
    //             {
    //                 title: '工资发放',
    //                 key: '0-7-2',
    //             },
    //         ],
    //     },
    //     {
    //         title: '系统设置',
    //         key: '0-8-0',
    //         children: [
    //             {
    //                 title: '用户管理',
    //                 key: '0-8-1',
    //             },
    //             {
    //                 title: '角色管理',
    //                 key: '0-8-2',
    //             },
    //             {
    //                 title: '个人中心',
    //                 key: '0-8-3',
    //             },
    //         ],
    //     },
    // ]
    return (
        <div className='system'>
            <div style={{ width: '100%', padding: ' 0 0 0 20px', boxSizing: 'border-box', borderBottom: '1px solid #ddd' }}>
                <h3>用户管理</h3>
            </div>
            <Space style={{ margin: 20 }}>
                <Button type="primary" onClick={onOpen}>新增</Button>
            </Space>
            <Table columns={columns} dataSource={tableData} rowKey={"id"} />
            <Drawer title="设置" placement="right" onClose={onClose} open={open}>
                <Form
                    name="basic"
                    form={form}
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    style={{ maxWidth: 600 }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                >
                    <Form.Item
                        label="姓名"
                        name="name"
                        rules={[{ required: true, message: '请输入名字' }]}
                    >
                        <Input disabled={!flag} />
                    </Form.Item>
                    <Form.Item
                        label="账户"
                        name="adminname"
                        rules={[{ required: true, message: '请选择账户' }]}
                    >
                        <Input />





                    </Form.Item>
                    <Form.Item
                        label="部门"
                        name="department"
                        rules={[{ required: true, message: '请选择部门' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="岗位"
                        name="post"
                        rules={[{ required: true, message: '请选择岗位' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="电话"
                        name="iphone"
                        rules={[{ required: true, message: '请输入电话' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="邮件"
                        name="email"
                        rules={[{ required: true, message: '请输入邮件' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="角色"
                        name="role"
                        rules={[{ required: true, message: '请选择角色' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="状态"
                        name="states"
                        rules={[{ required: true, message: '请选择状态' }]}
                    >
                        <Input />
                    </Form.Item>
                    {/* <Form.Item
                        label="权限"
                        name="checkedKeys"
                        rules={[{ required: true, message: '请选择状态' }]}
                    >
                        <Tree
                            checkable
                            treeData={treeData}
                            onCheck={onCheck}
                            checkedKeys={values}
                        />
                    </Form.Item> */}
                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit">
                            提交
                        </Button>
                    </Form.Item>
                </Form>
            </Drawer>
        </div>
    );
}

export default User;